<template>
  <div>
    <JButton @click="addRow()">添加行</JButton>
    <JButton @click="deleteRow()">删除行</JButton>
    <CheckBox :value.sync="isReadOnly" label="只读"></CheckBox>
    <FormatTable ref="fTable" :headers="headers" :cells="cells" :rowCount="17" :columnCount="9" :readonly="isReadOnly"></FormatTable>
  </div>
</template>

<script>
import {selectIndicatorType,selectOperatorType,inputType,customInputRow,headers,cells} from './performanceData'
import FormatTable from './FormatTable'
import JButton from '../JButton/JButton.vue';
import CheckBox from '../CheckBox/CheckBox.vue';
export default {
    props:{
      readonly:{
        type:Boolean,
        default:true
      },
    },
    components:{
        FormatTable,JButton,CheckBox
    },
    data(){
        return{
            headers,
            cells,
            isReadOnly:true
        }
    },    
    methods:{
      addRow(){
        console.log('addRow')
        if(this.$refs.fTable.curCell){          
          let cell = this.$refs.fTable.curCell;
          let cellValue = cell.defData.value 
          if(cellValue=='绩效目标')
          {
            let rowspan = cell.defData.rowspan;
            cell.defData.rowspan = rowspan+1;
            this.$refs.fTable.insertRowAt(cell.rowIndex+rowspan,{
                '1': {
                    def: { type: 'text' },
                    value: '目标'+cell.defData.rowspan,
                    style:{
                        width: '100px'
                    }
                },
                '2': {
                    def: { type: 'input' },
                    value: '',
                    colspan: 7,
                }
            },);
          }else if(cellValue=='产出指标'||cellValue=='效益指标'|| cellValue=='满意度指标')
          {
            console.log('产出指标:',cell.defData)
            let rowspan = cell.defData.rowspan;
            cell.defData.rowspan = rowspan+1;
            this.$refs.fTable.insertRowAt(cell.rowIndex+rowspan,customInputRow.getCopy(cell.defData.data.childList));
          }
        }
      },
      deleteRow(){
        if(this.$refs.fTable.curCell){
          let cell = this.$refs.fTable.curCell;
          let cellValue = cell.defData.value 
          if(cellValue=='绩效目标' || cellValue=='产出指标'||cellValue=='效益指标'|| cellValue=='满意度指标')
          {
            let rowspan = cell.defData.rowspan;
            if(rowspan>1){
              cell.defData.rowspan = rowspan-1;
              this.$refs.fTable.deleteRowAt(cell.rowIndex+rowspan-1);
            }
          }
        }
      }
    }
}
</script>

<style>
.tablec{
  width: 500px;
  height: 200;
  border: 1px solid black;
}
</style>